<!-- 库存汇总查询 - 综合表单页面 -->
<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">
    </ex_super_table_page>
    <el-dialog :title="`[${$tt('label_stock_detail')}] ` + chooseRow.skuName + ' - ' + chooseRow.skuNameEn"
      :visible.sync="dialogVisible" width="1100px">
      <ex_super_table class="el-table-nowwarp" ref="resourceDownloadGridPanelEl"
        :url="'/oms-api/client/OmsStockQueryClientRpc/stockContainerQuery.json?skuId=' + chooseRow.skuId + '&warehouseId=' + chooseRow.warehouseId"
        :attrs="{ autoPage: true, autoLoad: true }" height="400" v-bind="tableOption">
      </ex_super_table>
      <span slot="footer" class="dialog_footer">
        <el-button @click="dialogVisible = false">{{ $tt('label_close') }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import business_function from "@/common/business_function"
import { mapState } from "vuex";
export default {
  title: 'title_stock_head_query',
  components: {},
  data() {


    return {
      selection: [],
      dialogVisible: false,
      chooseRow: {},

      option: {
        search: {
          model: [
            { label: "label_sku", key: "skuId", type: 'sku_selec_input' },
            {
              label: "label_warehouse", key: "warehouseId", type: 'base_warehouse_select',
            },
            { label: "label_quantity_type", key: "qtyType", type: 'input', },

            { label: "label_quantity_range", key: "qty1", type: 'input', },
            { label: "", key: "qty2", type: 'input', }
          ],
        },
        actionExtra: [
          {
            label: 'label_export', click: this.exportExcel
          },
        ],

        table: {
          url: "/oms-api/client/OmsStockQueryClientRpc/stockHeadQuery.json",
          attrs: {},
          model: [
            { type: 'selection', clickToggle: true, },

            {
              key: 'warehouseId', label: 'label_warehouse', align: 'left', 'width': 160,
              attrs: {
                formatter: (r, c, v, i) => this.$formatNameCode(this.allWarehouseMap[v].name, this.allWarehouseMap[v].code)
              },
              align: 'left'
            },
            {
              key: 'skuOnlyCode', label: 'label_sku_only_code', align: 'left', 'min-width': 160,
              attrs: {
                formatter: (r, c, v, i) => r.skuId < 0 ? "——" : v
              }
            },
            {
              key: 'skuBarcode', label: 'label_sku_code', align: 'left', 'width': 160,
              attrs: {
                formatter: (r, c, v, i) => r.skuId < 0 ? "——" : v
              }
            },
            {
              key: 'skuName', label: 'label_sku_name', align: 'left', 'width': 160,
              attrs: {
                formatter: (r, c, v, i) => r.skuId < 0 ? "——" : v
              }
            },

            {
              key: 'skuNameEn', label: 'label_sku_name_en', align: 'left', 'width': 160,
              attrs: {
                formatter: (r, c, v, i) => r.skuId < 0 ? "——" : v
              }
            },
            {
              key: 'allotPutawayQyt', label: 'label_dure_journey_count', 'width': 100,
            },
            {
              key: 'needPutawayQyt', label: 'label_wait_put_count', 'width': 100,
            },
            {
              key: 'needOutboudQty', label: 'label_wait_outbound_count', 'width': 100,
            },

            // TOC 数量字段
            {
              key: 'tcLockQty', label: 'label_toc_lock_count', align: 'right','width': 100,
            },
            {
              key: 'tcUsableQty', label: 'label_toc_usable_count', align: 'right','width': 100,
            },
            // {
            //   key: 'tcFreezeQty', label: 'label_toc_frozen_count',
            // },

            // TOB 数量字段
            {
              key: 'tbLockQty', label: 'label_tob_lock_count', align: 'right','width': 100,
            },
            {
              key: 'tbUsableQty', label: 'label_tob_usable_count', align: 'right','width': 100,
            },

            {
              key: 'totalQty', label: 'label_usable_count', align: 'right','width': 100,  // 可用数量（良品/不良品
              attrs: {
                formatter: (r, c, v, i) => (r.goodUsableQty + r.badUsableQty) // + '/' + r.goodUsableQty + '/' + r.badUsableQty
              }
            },
            {
              key: 'totalQty', label: 'label_sum_stock', 'width': 100,
            },
          ],

        }
        ,

      },
      tableOption: {
        model: [
          {
            key: 'warehouseId', label: 'label_warehouse', 'min-width': 140, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$formatNameCode(this.allWarehouseMap[v].name, this.allWarehouseMap[v].code)
          },


          { key: 'freezeQty', label: 'label_frozen_count', 'width': 120, 'show-overflow-tooltip': true, },
          { key: 'lockQty', label: 'label_lock_count', 'width': 120, 'show-overflow-tooltip': true, },
          { key: 'usableQty', label: 'label_usable_count', 'width': 120, 'show-overflow-tooltip': true, },

          { key: 'totalQty', label: 'label_sum', 'width': 120, 'show-overflow-tooltip': true, },
          { key: 'putawayTime', label: 'label_putaway_time', 'width': 130, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$dateFormat(v) },

        ]
      },

    };
  },
  computed: {
    ...mapState({ allWarehouseMap: state => state.allWarehouseMap }),
  },
  methods: {
    exportExcel() {
      business_function.confirmOperateBaseSelectOrForm.call(this, {
        data: this.$refs.SuperTablePage.getSearchFormData(),
        model: this.option.search.model,
        selection: this.selection,
        callback: (selection, data) => {
          let params = {}
          if (!_.isEmpty(selection)) {
            params = {
              stockHeadIdList: selection.map(it => it.id)
            }
          } else {
            params = data
          }
          this.$functionCommon({
            url: this.$url['oms/stock/exportExcel'],
            data: params,
          })
        }
      })

    },
  }
};

</script>
<style></style>
